{% extends 'IcsocUIBundle::page.html.twig' %}
{% from 'IcsocUIBundle:Macro:grid.html.twig' import gridWidth,gridNav,gridConfig,gridKeyword,sendKeyWord %}
{% block stylesheet %}
    {{ parent() }}
    {% stylesheets
    '@jqgird_css'
    '@gritter_css'
    filter='cssrewrite' filter='uglifycss'
    %}
    <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
{% endblock %}

{% block content %}
    {{ gridKeyword('Skill group name'|trans) }}
    <table id="grid-table"></table>
    <div id="grid-pager"></div>
    <div class="widget-box">
        <div class="widget-header">
            <h4 class="smaller">{{ 'Seat allocation'|trans }}</h4>
        </div>
        <div class="widget-body">
            <div class="widget-main">
                <div class="col-sm-4" id="assign_agent">
                    <div class="dd">
                        <div class="dd2-content btn-info no-hover">{{ 'To be the allocation of seats'|trans }}</div>
                        <ol class="dd-list" id="list_agent"></ol>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="dd dd-draghandle" >
                        <div class="dd2-content btn-info no-hover">{{ 'The distribution of seats'|trans }}</div>
                        <ol class="dd-list" id="que_agent"></ol>
                    </div>
                </div>
                <div class="well col-sm-4">
                    <h4 class="green smaller lighter">{{ 'Seat allocation instructions'|trans }}</h4>
                    <ul>
                        {% set strong = '<strong>' %}
                        {% set endstrong = '</strong>' %}
                        <li>{{ 'Click on the button in the table above distribution'|trans }}</li>
                        <li>
                            {% trans %}
                              The %strong%distribution of seats%endstrong% left to drag to the right (%strong%assigned seats%endstrong%)
                            {% endtrans %}
                        </li>
                    </ul>
                </div>
                <div style="clear: both"></div>
            </div>
        </div>
    </div>
    <input type="hidden" id="objstr" value="" />
{% endblock %}
{% block footer %}
    {% javascripts
    '@jqgird_js'
    '@gritter_js'
    '@nestable_js'
    '@common_js'
    filter='uglifyjs'
    %}
    <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
    <script type="text/javascript">
        jQuery(function($) {
            {{ gridWidth() }}
            jQuery(grid_selector).jqGrid({
                url: "{{ path('icsoc_queue_list') }}",  //数据；
                colNames:['{{ 'actions'|trans }}', 'ID', '{{ 'Skill group name'|trans }} ','{{ 'The skill set of type'|trans }}','{{ 'Is studio'|trans }}','{{ 'Distribution strategy'|trans }}','{{ 'Timeout length'|trans }}(s)','{{ 'Post processing time'|trans }}(s)','{{ 'Distribution'|trans }}'],  //列显示名称，是一个数组对象
                colModel:[
                    {name:'myac',index:'', width:80, fixed:true, sortable:false, resize:false,
                        formatter:'actions',
                        formatoptions:{
                            keys:true,
                            editbutton:true,
                            editformbutton: true,
                            delOptions:{recreateForm: true, beforeShowForm:beforeDeleteCallback, afterSubmit:afterDeleteCallback},
                            editOptions:{width: "0",height: "0", jqModal:false, beforeShowForm:beforeEditCallback }
                        }
                    },
                    {name:'id',index:'id', width:60, hidden:true,fixed:true,editable: true, sortable:false},
                    {name:'que_name',index:'que_name',width:150, fixed:true,editable:true, sortable:false},
                    {name:'que_type',index:'que_type',width:90, fixed:true,editable:true, sortable:false },
                    {name:'brecord',index:'brecord',width:90, fixed:true,sortable:false,formatter:function(cellvalue, options, rowObject){
                        return cellvalue == 1 ? '{{ 'Yes'|trans }}' : '{{ 'No'|trans }}';
                    }},
                    {name:'que_strategy',index:'que_strategy',width:190,fixed:true, editable:true, sortable:false },
                    {name:'que_time',index:'que_time',width:90, fixed:true,editable:true, sortable:false },
                    {name:'next_wait',index:'next_wait',width:150,fixed:true, editable:true, sortable:false },
                    {name:'ids',index:'ids',width:120, editable:false, fixed:true,ortable:false, formatter:function(cellvalue, options, rowObject){
                        return "<span onclick='distribution("+rowObject.id+")' style='cursor:pointer' class='btn btn-xs ace-icon fa fa-eye'>{{ 'Distribution'|trans }}</span>";
                    }}
                ],
                {{ gridConfig() }}
                editurl: "{{ path('icsoc_queue_del') }}",//nothing is saved 定义对form编辑时的url
                caption: "{{ 'Skill list'|trans }}"//表格名称
            });
            {{ gridNav(false,false,true,false,true,true,path('icsoc_queue_add'),path('icsoc_queue_edit')) }}
            jQuery(grid_selector).jqGrid('navGrid',pager_selector).navButtonAdd(pager_selector,{caption:'{{ 'Fast allocation'|trans }}',buttonicon:'ace-icon fa fa-share',onClickButton:function(){
                location.href='{{ path('icsoc_queue_agqu_index') }}';  //自定义添加按钮
            }});
        });
        $('.dd').nestable({maxDepth:1});
        var que_ids;
        function distribution(que_id) {
            $('#que_agent').html('');
            $('#list_agent').html('');
            //取消其他表格选中；
            $('#grid-table').resetSelection();
            que_ids = que_id;
            $.ajax({
                url: "{{ path('icsoc_queue_get_distribution') }}",
                type: "GET",
                dataType: "json",
                data: "que_id="+que_id,
                success: function(res) {
                    if (res.error == 1) {
                        $.gritter.add({
                            title: '{{ 'Prompt'|trans }}',
                            text: res.message,
                            class_name: 'gritter-light'
                        });
                    } else {
                        var list_agent = "";
                        var que_agent = "";
                        var objstr = "[";
                        for(var i=0;i<res.list_agent.length;i++){
                            var data = res.list_agent[i];
                            list_agent+="<li class='dd-item item-red' data-id='"+data.ag_id+"'><div class='dd-handle'>";
                            list_agent+=data.ag_name+'('+data.ag_num+")</div></li>";
                        }
                        for(var i=0;i<res.que_agent.length;i++){
                            var data = res.que_agent[i];
                            objstr+= "{\"ag_id\":\""+data.ag_id+"\",\"skill\":\"1\"}";;
                            objstr+= (i==(res.que_agent.length-1)) ? '' : ',';
                            que_agent+="<li class='dd-item item-red' data-id='"+data.ag_id+"'><div class='dd-handle'>";
                            que_agent+=data.ag_name+'('+data.ag_num+")&nbsp;&nbsp;{{ 'Skill level'|trans }}:<span id='skill_"+data.aqid+"'>"+data.skill+"</span><div class='pull-right action-buttons'>";
                            que_agent+="<a class='blue' href='###' onclick='editSkill("+data.aqid+")'>";
                            que_agent+="<i class='ace-icon fa fa-pencil bigger-130'></i></a></div></div></li>";
                        }
                        if (que_agent.length < 1 && $('.dd-empty').length<1) {
                            que_agent="<div class='dd-empty'></div>";
                        }
                        $('#objstr').val(objstr+']');
                        if (que_agent.length > 1) {
                            $('#que_agent').html(que_agent);
                        }
                        $('#list_agent').html(list_agent);
                        $('.dd-handle a,.dd-handle span').on('mousedown', function(e){
                            e.stopPropagation();
                        });
                    }
                }
            });
        }
        $("#assign_agent").on('change', function() {
            if (!que_ids) {
                $.gritter.add({
                    title: '{{ 'Prompt'|trans }}',
                    text: "{{ 'Please select the skill set'|trans }}",
                    class_name: 'gritter-error'
                });
                return false;
            }
            //获取que_agent中的li
            var obj =  $('.dd').nestable('serialize');
            var agents = "[";
            for (var i=0; i < obj.length; i++) {
                agents+="{\"ag_id\":\""+obj[i].id+"\",\"skill\":\"1\"}";
                agents+= (i==(obj.length-1)) ? '' : ',';
            }
            agents+="]";
            var objstr = $('#objstr').val();
            if (agents == objstr) {
                return ;
            }
            if (agents.length >= 3) {
                $.ajax({
                    type: 'post',
                    url: "{{ path('icsoc_queue_set_distribution') }}",
                    data: 'agents='+agents+"&que_id="+que_ids,
                    success: function (res) {
                        if (res.error) {
                            $.gritter.add({
                                title: '{{ 'Prompt'|trans }}',
                                text: res.message,
                                class_name: res.error ? 'gritter-error' : 'gritter-success'
                            });
                        } else {
                            $.gritter.add({
                                title: '{{ 'Prompt'|trans }}',
                                text: '{{ 'Action success'|trans }}',
                                class_name: res.error ? 'gritter-error' : 'gritter-success'
                            });
                        }
                    }
                })
            }
            distribution(que_ids);
        });
        var oldValue = '';
        function editSkill(id)
        {
           var ids = '#skill_'+id;
           oldValue = $(ids).text();
           var html = "<input type='text' value='"+oldValue+"' id='updteSkill_"+id+"' onblur='updateSkill("+id+")' />";
           $(ids).html(html);
        }

        function updateSkill(skillId)
        {
            var id = '#updteSkill_'+skillId;
            var val = $(id).val();
            if (val.length < 1) {
                gritterAlert('{{ 'Prompt'|trans }}', '{{ 'Skill level can not be empty'|trans }}', 'info');
                return ;
            }
            $.ajax({
                type: 'post',
                url: '{{ path('icsoc_queue_update_skill') }}',
                data: 'id='+skillId+'&val='+val,
                success: function(res){
                    if (res.error) {
                        gritterAlert('{{ 'Prompt'|trans }}', '{{ 'Failure'|trans }}', 'error');
                        $('#skill_'+skillId).html(oldValue);
                    } else {
                        $('#skill_'+skillId).html(val);
                    }
                }
            })
        }
        {{ sendKeyWord('que_name') }}
    </script>
{% endblock %}